<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <link rel="stylesheet" th:href="@{/frame/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/frame/flyres/css/global.css}">
    <link rel="stylesheet" th:href="@{/css/fly/global.css}">
</head>
<body>
<div th:replace="customer/top :: topBar"></div>

<div class="layui-container">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-form-item" id="selectgroup">
                            <label class="layui-form-label" style="width: 160px;">请选择分类：</label>
                            <!-- ajax填充-->
                        </div>
                    </div>
                    <input type="hidden" id="groupid" name="groupid" th:value="${searchInfos.groupid}">
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px;">排序：</label>
                            <div class="layui-input-block">
                                <input type="radio" name="order" value="0" title="按热度" th:checked="${searchInfos.order} eq 0"/>
                                <input type="radio" name="order" value="1" title="按时间" th:checked="${searchInfos.order} eq 1"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md12">
                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 160px;">搜索关键词：</label>
                            <div class="layui-input-inline" style="width: 50%;">
                                <input type="text" name="keyword" class="layui-input" th:value="${searchInfos.keyword}">
                            </div>
                            <button class="layui-btn layui-btn-normal">搜索</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-container">
    <ul class="layui-row layui-col-space30">
        <li class="layui-col-sm12 layui-col-md6" th:each="item : ${docpageinfo.list}">
            <div class="fly-extend-list layui-card">
                <div class="fly-extend-list-header">
                    <h2 class="fly-extend-title layui-elip">
                        <img th:src="@{'/picture/getIcon?fileName='+${item.suffixicon.url}}" width="auto" height="30px">
                        <a th:href="@{'/document/documentDetail?docid='+${item.docid}}" th:text="${item.title}"></a>
                        <div class="layui-badge layui-bg-green layui-hide-xs"
                             th:text="${item.neededintegral}+'积分'"></div>
                    </h2>
                    <div class="fly-extend-list-info">
                        <a th:href="@{'/customer/privHome?uid='+${item.uploaduser.phone * 6}}" target="_blank"
                           class="fly-extend-list-user">
                            <cite class="layui-hide-xs" th:text="${item.uploaduser.username}"></cite>
                            <img th:src="@{'/picture/getAvatar?fileName='+${item.uploaduser.avatar}}"
                                 th:alt="${item.uploaduser.username}">
                        </a>
                    </div>
                </div>
                <a th:href="@{'/document/documentDetail?docid='+${item.docid}}" target="_blank">
                    <p class="fly-extend-list-desc" th:text="${item.description}"></p>
                </a>
            </div>
        </li>
    </ul>
    <div class="layui-row" style="text-align: center">
        <div id="changePageBar"></div>
    </div>
</div>
<script type="text/javascript" th:src="@{/frame/layui/layui.js}"></script>
<script>
    layui.use(['laypage', 'layer', 'form', 'element'], function () {
        var laypage = layui.laypage
            , layer = layui.layer
            , $ = layui.$
            , form = layui.form;

        function appendFirstGroup() {
            $.ajax({
                type: 'post',
                url: '[[@{/group/getFirstStepGroup}]]',
                async: false,
                dataType: 'json',
                error: function () {
                    layer.msg('Ajax请求失败！', {
                        icon: 2
                        , time: 2000
                    })
                },
                success: function (res) {
                    if (res.count > 0) {
                        let appendedhtml = '<div class="layui-input-inline">';
                        appendedhtml += '<select lay-filter="selectGroup">';
                        appendedhtml += '<option value="-1">请选择分类</option>';
                        for (let i = 0; i < res.count; i++) {
                            const item = res.data[i];
                            appendedhtml += '<option value="' + item.groupid + '">' + item.groupname + '</option>';
                        }
                        appendedhtml += '</select>';
                        appendedhtml += '</div>';
                        $('#selectgroup').append(appendedhtml);
                        form.render('select');
                    }
                }
            });
        }

        form.on('select(selectGroup)', function (ooo) {
            const formitem = $(ooo.elem).parent().parent();

            $(ooo.elem).parent().nextAll().remove();
            if (ooo.value !== '-1') {
                $('#groupid').val(ooo.value);
                $.ajax({
                    type: 'post',
                    url: '[[@{/group/getGroupChildren}]]',
                    async: false,
                    data: {
                        groupid: ooo.value
                    },
                    dataType: 'json',
                    error: function () {
                        layer.msg('Ajax请求失败！', {
                            icon: 2
                            , time: 2000
                        })
                    },
                    success: function (res) {
                        if (res.count > 0) {
                            let appendedhtml = '<div class="layui-input-inline">';
                            appendedhtml += '<select lay-filter="selectGroup">';
                            appendedhtml += '<option value="-1">请选择分类</option>';
                            for (let i = 0; i < res.count; i++) {
                                const item = res.data[i];
                                appendedhtml += '<option value="' + item.groupid + '">' + item.groupname + '</option>';
                            }
                            appendedhtml += '</select>';
                            appendedhtml += '</div>';
                            formitem.append(appendedhtml);
                        }
                    }
                });
            } else {
                //选择了第一个select的“请选择分类”
                if (!$(ooo.elem).parent().prev().children().eq(0).html()) {
                    $('#groupid').val(-1);
                } else {
                    //将前一个select的值赋给隐藏input
                    $('#groupid').val($(ooo.elem).parent().prev().children().eq(0).val());
                }
            }

            //重新渲染
            form.render('select');
        });

        $(function () {
            appendFirstGroup();
        });


        laypage.render({
            elem: 'changePageBar' //注意，这里的 test1 是 ID，不用加 # 号
            , count: [[${docpageinfo.total}]] //数据总数，从服务端得到
            , curr: [[${docpageinfo.pageNum}]]
            , limit: [[${docpageinfo.pageSize}]]
            , limits: [10, 20, 30, 40, 50]
            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
            , jump: function (obj, first) {
                if (!first) {
                    location.href = '[[@{/document/searchDoc?index=}]]' + obj.curr + '&pageSize=' + obj.limit + '&keyword=[[${searchInfos.keyword}]]&groupid=[[${searchInfos.groupid}]]&order=[[${searchInfos.order}]]';
                }
            }
        });
    });
</script>
</body>
</html>